<template>
  <div class="box">
    <topLogin :isIndex="false"></topLogin>
    <topNav :isActive="-1"></topNav>
    <div class="wid-1200 min-height">
      <div class="search">
        <input type="text" v-model="value"/>
        <button>
          <img src="../../assets/images/icon-search-white.png" />搜索
        </button>
      </div>
      <div class="search-list">
        <p class="search-results">
          共找找到
          <span>{{num}}</span>个包含"
          <span>纪念</span>"的结果
        </p>
        <div class="results-list-box">
          <!-- 空页面 -->
          <div class="empty-box" v-show="num==0">
            <img src="../../assets/images/empty.png" alt />
            <p>没有找到符合条件的结果</p>
          </div>
          <!-- 结果列表 -->
          <ul class="results-list">
            <li v-for="(item,index) in list" :key="index">
                <router-link to>
                    <p class="little-title only-1">{{item.title}}</p>
                    <div class="content only-1">{{item.content}}</div>
                    <span class="link">{{item.link}}</span>
                </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <footNav></footNav>
  </div>
</template>

<script>
import topNav from "@/components/topNav/index";
import footNav from "@/components/footNav/index";
import topLogin from "@/components/topLogin/index";
export default {
  name: "Search",
  components: { topNav, footNav, topLogin },
  data() {
    return {
        num:5,
        value:'',
        list:[
            {title:`为了永不忘却的纪念——省、市退役军人系统开展清明“致敬英烈代祭扫”活动
`,content:'又是一年春草绿，梨花风起正清明。今年清明节因新冠肺炎疫情影响，社会各界广大群众无法前来祭扫，但先烈的功勋不能忘...',link:'http://jngmlsly.jinan.cn/art/2020/4/7/art_4006_203831.html'},
{title:`为了永不忘却的纪念——省、市退役军人系统开展清明“致敬英烈代祭扫”活动
`,content:'又是一年春草绿，梨花风起正清明。今年清明节因新冠肺炎疫情影响，社会各界广大群众无法前来祭扫，但先烈的功勋不能忘...',link:'http://jngmlsly.jinan.cn/art/2020/4/7/art_4006_203831.html'},
{title:`为了永不忘却的纪念——省、市退役军人系统开展清明“致敬英烈代祭扫”活动
`,content:'又是一年春草绿，梨花风起正清明。今年清明节因新冠肺炎疫情影响，社会各界广大群众无法前来祭扫，但先烈的功勋不能忘...',link:'http://jngmlsly.jinan.cn/art/2020/4/7/art_4006_203831.html'},
{title:`为了永不忘却的纪念——省、市退役军人系统开展清明“致敬英烈代祭扫”活动
`,content:'又是一年春草绿，梨花风起正清明。今年清明节因新冠肺炎疫情影响，社会各界广大群众无法前来祭扫，但先烈的功勋不能忘...',link:'http://jngmlsly.jinan.cn/art/2020/4/7/art_4006_203831.html'},
{title:`为了永不忘却的纪念——省、市退役军人系统开展清明“致敬英烈代祭扫”活动
`,content:'又是一年春草绿，梨花风起正清明。今年清明节因新冠肺炎疫情影响，社会各界广大群众无法前来祭扫，但先烈的功勋不能忘...',link:'http://jngmlsly.jinan.cn/art/2020/4/7/art_4006_203831.html'}
        ]
    };
  },
  mounted(){
      this.value=this.$route.query.value
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/basis";
.search {
  width: 868px;
  height: 50px;
  border: 1px solid $colorEarth;
  border-radius: 4px;
  margin: 50px auto;
  overflow: hidden;
  display: flex;
  input {
    flex: 1;
    padding-left: 20px;
  }
  button {
    background-color: $colorEarth;
    > img {
      display: inline-block;
      width: 20px;
      margin-right: 10px;
    }
    width: 119px;
    font-size: 18px;
    color: #fff;
  }
}
.search-list {
  padding:20px;
    background-color: #fff;
  .search-results {
    text-align: right;
    font-size: #333;
    > span {
      color: $colorEarth;
    }
  }
//   搜索结果
  .results-list-box {
    //   空
    .empty-box {
      text-align: center;
      padding:210px 0;
      > img {
        width: 145px;
        margin: 0 auto 20px;
      }
      > p {
        font-size: 14px;
        color: #333;
      }
    }
    // 结果列表
    .results-list{
        >li{
            width:780px;
            margin-bottom:20px;
            >a{
                display: block;
            }
            .content{
                font-size: 14px;
                color: #999;
            }
            .link{
                font-size: 12px;
                color: $colorBlue;
            }
        }
    }
  }
}
</style>